<template>
  <div class="myTable">
    <head-top></head-top>
    <!-- 条件查询表单 -->
    <div id="queryForm">
      <el-form :inline="true" :model="studnetQuery">
        <el-form-item>
          <el-col :span="20">
            <el-input id="user-name" v-model="studnetQuery.name" placeholder="请输入姓名" style="width: 120px;"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="6">
            <el-select v-model="studnetQuery.sex" placeholder="请选择性别">
              <el-option :value="0" label="男" />
              <el-option :value="1" label="女" />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="10">
            <el-input v-model="studnetQuery.age" placeholder="请输入年龄" style="width: 100px;"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="20">
            <el-input v-model="studnetQuery.school" placeholder="请输入毕业学校" style="width: 200px;"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="10">
            <el-input v-model="studnetQuery.specialty" placeholder="请输入专业" style="width: 200px;"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryStudent"><i class="el-icon-search"></i> 查询</el-button>
          <el-button type="danger" @click="resetForm"><i class="el-icon-delete"></i> 清空</el-button>
          &nbsp;&nbsp;
          <router-link :to="'/addStudent'">
            <el-button type="primary"><i class="el-icon-plus"> 增加</i>
            </el-button>
          </router-link>
          &nbsp;&nbsp;
          <el-upload ref="upload" style="display: inline-block" accept=".xls,.xlsx"
            action="http://localhost:8008/user/upload" :show-file-list="false" :auto-upload="true" :multiple="false"
            :before-upload="beforeUpload" :on-success="uploadSuccess">
            <el-button type="primary"><i class="el-icon-upload"></i> 导入</el-button>
          </el-upload>
          &nbsp;&nbsp;
          <el-button type="primary" @click="exportFile"><i class="el-icon-download"></i> 导出
          </el-button>
          <el-button type="primary">
            <a :href="'https://project-edu-service.oss-cn-beijing.aliyuncs.com/user.xls'"
              style="color: #fff; text-decoration: none">模版</a>
            <i class="el-icon-download el-icon--right"></i>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 数据表格 -->
    <el-table :data="studentList" border width="100%">
      <el-table-column label="序号" width="70" align="center">
        <template scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="学号" prop="id" width="120" align="center"></el-table-column>
      <el-table-column label="姓名" prop="name" width="90" align="center">
      </el-table-column>
      <el-table-column label="性别" prop="sex" width="70" align="center">
        <template slot-scope="scope">
          {{ scope.row.sex === 0 ? "男" : "女" }}
        </template>
      </el-table-column>
      <el-table-column label="年龄" prop="age" width="70" align="center"></el-table-column>
      <el-table-column label="毕业院校" prop="school" width="170" align="center"></el-table-column>
      <el-table-column label="专业" prop="specialty" width="170" align="center"></el-table-column>
      <el-table-column label="现住址" prop="currentaddress" width="220" align="center"></el-table-column>
      <el-table-column label="籍贯" prop="nativeplace" width="150" align="center"></el-table-column>
      <el-table-column label="联系方式" prop="phone" width="130" align="center"></el-table-column>
      <el-table-column label="邮箱" prop="email" width="210" align="center"></el-table-column>
      <el-table-column label="操作" align="center" >
        <template slot-scope="scope">
          <router-link :to="'/editstudent/' + scope.row.id">
            <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
          </router-link>
          &nbsp;
          <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteStudent(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20, 30, 50, 100]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
        :total="total"></el-pagination>
    </div>
  </div>
</template> 
<script>
import axios from 'axios';
import headTop from '../../components/headTop.vue';
export default {
  data() {
    return {
      studnetQuery: {},
      currentPage: 1,
      limit: 10,
      total: 10,
      studentList: [],
    };
  },
  components: {
    headTop,
  },

  created() {
    this.pageSelect(this.currentPage, this.limit);
  },
  watch: {
    $route(to, from) {
      // 路由变化的方式，路由发生变化，方法就会执行
      this.pageSelect(this.currentPage, this.limit);
    },
  },

  methods: {
    // 分页查询学生
    pageSelect(current, limit) {
      axios.post(`http://114.116.52.2:8008/student/selectStudent/${current}/${limit}`, this.studnetQuery).then(res => {
        this.studentList = res.data.data.rows;
        this.total = res.data.data.total;
      })
    },
    // form表单条件查询，绑定在form表单的查询按钮
    queryStudent() {
      this.pageSelect(this.currentPage, this.limit);
    },

    // 删除学生（根据学号）
    deleteStudent(id) {
      this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete(`http://localhost:9000/main/student/removeStudentById/${id}`).then(res => {
          let code = res.data.code;
          if (code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.pageSelect(this.currentPage, this.limit);
          }
        })
      })
    },
    resetForm() {
      this.studnetQuery = {};
      this.pageSelect(this.currentPage, this.limit);
    },
    // 每页记录数发生变化
    handleSizeChange(val) {
      this.limit = val;
      this.pageSelect(1, this.limit);
    },
    // 当前页发生变化
    handleCurrentChange(val) {
      this.currentPage = val;
      this.pageSelect(this.currentPage, this.limit);
    }
  },
};
</script>

<style>
.myTable {
  width: 98%;
  height: 850px;
  margin: 10px auto;
  text-align: center;
  overflow: hidden scroll;
}

.block {
  margin-top: 15px;
}

#queryForm {
  float: left;
  width: 100%;
  height: auto;
  text-align: left;
  padding: 20px 0 0 15px;
  margin-bottom: 10px;
  border-radius: 5px;
}

#queryForm .el-input {
  width: 120px;
}
</style>